<script setup lang="ts" name="makets">
  import MaketsList from './components/MaketsList.vue';
  import { ref } from 'vue';
  const type = ref('Cryptocurrencies');
</script>

<template>
  <div class="makets">
    <div class="tabs">
      <!-- <van-tabs v-model:active="type">
        <van-tab name="Cryptocurrencies" :title="$t('Cryptocurrencies')" />
        <van-tab name="Forex" :title="$t('Forex')" />
        <van-tab name="Futures" :title="$t('Futures')" />
      </van-tabs> -->
      <MaketsList :type="type" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .makets {
    .tabs {
      padding: 20px 30px 0 30px;
    }
  }
</style>
<style lang="scss">
  .makets {
    .van-tabs__nav {
      background: #f6f7fb;
      justify-content: space-between;
    }
    .van-tabs__nav--line {
      padding-bottom: 0;
    }
    .van-tab {
      background: rgb(229, 239, 254);
      min-width: 200px;
      height: 68px;
      border-radius: 34px;
      font-size: 27px;
      padding: 0 25px;
      flex: 0;
    }
    .van-tabs__line {
      display: none;
    }
    .van-tab--active {
      background: rgb(0, 99, 245);
      color: #fff;
    }
    .search_box {
      padding-bottom: 0;
      height: 56px;

      .var-input,
      .var-field-decorator,
      .var-field-decorator__controller {
        height: 56px;
        line-height: 56px;
        border-radius: 900px;
        font-size: 28px;
      }

      .var-input__input {
        height: 36px;
      }

      .icon-sousuo {
        font-size: 28px;
        color: #7a7a7a;
      }

      .var-field-decorator__controller {
        padding-left: 30px;
      }
    }
  }
</style>
